<!--

chart.js图表 数据格式为后端返回 前端不做处理

// 折线图数据
const line = {
  title: "2025年4月10日8点到10点订单数据",
  xAxis: [
    "8:00",
    "8:10",
    "8:20",
    "8:30",
    "8:40",
    "8:50",
    "9:00",
    "9:10",
    "9:20",
    "9:30",
    "9:40",
    "9:50",
    "10:00",
  ],
  yAxis: ["订单数量"],
  series: [
    {
      name: "订单数量",
      data: [15, 20, 18, 30, 25, 28, 22, 26, 24, 32, 30, 27, 25],
    },
  ],
  type: "line",
};

// bar
const bar = {
  type: "bar",
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First Dataset",
      data: [12, 19, 3, 5, 2, 3, 7],
      backgroundColor: "rgba(75, 192, 192, 0.2)",
      borderColor: "rgba(75, 192, 192, 1)",
      borderWidth: 1,
    },
  ],
};

// pie
const pie = {
  type: 'pie',
  labels: ["Red", "Blue", "Yellow"],
  datasets: [
    {
      label: "My Pie Chart",
      data: [300, 50, 100],
      backgroundColor: [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)",
      ],
      borderColor: [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)",
      ],
      borderWidth: 1,
    },
  ],
};

 -->
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import Chart from 'chart.js/auto'
import { cloneDeep } from 'lodash-es'

const props = defineProps({
	msg: {
		type: Object,
		required: true,
		default: () => ({}),
	},
})

const canvasRef = ref<HTMLElement | null>(null)

// watch(
// 	() => props.msg,
// 	(newMsg) => {
//     console.log(newMsg, 'newMsg');
//     if(!canvasRef.value) return

//     new Chart(canvasRef.value as any, {
//       type: newMsg.chartType,
//       data: newMsg.data,
//       options: {
//         responsive: true,
//         maintainAspectRatio: false
//       }
//     })
// 	},
// 	{
//     deep: true,
// 	}
// )

onMounted(() => {
	if (!canvasRef.value) return
	const chatData: any = cloneDeep(props.msg)
	chatData.type = chatData.type || chatData.chartType
	console.log(chatData, 'props.msg')
	let chatJsData: any = {}
	if (!chatData.type) {
		return
	}

	// 柱状图
	if (chatData.type === 'bar') {
		chatJsData = {
			labels: chatData.xAxis, // X轴标签
			datasets: [
				{
					label: chatData.title, // 数据集标签
					data: chatData.yAxis, // 数据集的值，对应每个标签的值
          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
					borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
				},
			],
		}
	}
	// 折线图
	if (chatData.type === 'line') {
    if(!Array.isArray(chatData.series) || !chatData.series.length){
      return
    }
		let d = chatData.series[0].data || chatData.yAxis
		chatJsData = {
			labels: chatData.xAxis, // X轴标签
			datasets: [
				{
					label: chatData.title, // 图例名称
					data: d, // Y轴数据点
          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
					borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
				},
			],
		}
	}
	if (chatData.type === 'pie') {
    if(!Array.isArray(chatData.series) || !chatData.series.length){
      return
    }
    let d = chatData.series[0].data
		chatJsData = {
			labels: chatData.legend.data,
			datasets: [
				{
					// label: '# of Votes',
					data: d,
					backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
					borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
					borderWidth: 1,
				},
			],
		}
	}
	/*
  {
    "chartType": "table",
    "data": [
        {
            "product_id": 1,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 2999.99,
            "quantity": 2,
            "order_id": 1,
            "product_name": "智能手表",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-03-10",
            "customer_name": "北京科技有限公司",
            "category": "电子产品",
            "total_amount": 12299.95,
            "total_price": 5999.98
        },
        {
            "product_id": 2,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 1299,
            "quantity": 3,
            "order_id": 1,
            "product_name": "无线蓝牙耳机",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-03-10",
            "customer_name": "北京科技有限公司",
            "category": "电子产品",
            "total_amount": 12299.95,
            "total_price": 3897
        },
        {
            "product_id": 3,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 399.99,
            "quantity": 1,
            "order_id": 1,
            "product_name": "电动牙刷",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-03-10",
            "customer_name": "北京科技有限公司",
            "category": "健康美容",
            "total_amount": 12299.95,
            "total_price": 399.99
        },
        {
            "product_id": 4,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 1999.99,
            "quantity": 2,
            "order_id": 2,
            "product_name": "智能音箱",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-02-15",
            "customer_name": "北京科技有限公司",
            "category": "电子产品",
            "total_amount": 10099.97,
            "total_price": 3999.98
        },
        {
            "product_id": 5,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 1599,
            "quantity": 3,
            "order_id": 2,
            "product_name": "空气净化器",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-02-15",
            "customer_name": "北京科技有限公司",
            "category": "家电",
            "total_amount": 10099.97,
            "total_price": 4797
        },
        {
            "product_id": 6,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 3999.99,
            "quantity": 1,
            "order_id": 3,
            "product_name": "全自动洗衣机",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-01-20",
            "customer_name": "北京科技有限公司",
            "category": "家电",
            "total_amount": 7999.98,
            "total_price": 3999.99
        },
        {
            "product_id": 7,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 5999.99,
            "quantity": 2,
            "order_id": 3,
            "product_name": "4K智能电视",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-01-20",
            "customer_name": "北京科技有限公司",
            "category": "电子产品",
            "total_amount": 7999.98,
            "total_price": 11999.98
        },
        {
            "product_id": 8,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 499,
            "quantity": 3,
            "order_id": 4,
            "product_name": "颈椎按摩器",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-03-25",
            "customer_name": "北京科技有限公司",
            "category": "健康美容",
            "total_amount": 15999.96,
            "total_price": 1497
        },
        {
            "product_id": 9,
            "contact_email": "contact@beijingtech.com",
            "country": "中国",
            "contact_phone": "+86 10 9876 5432",
            "city": "北京",
            "postal_code": "100086",
            "unit_price": 89.99,
            "quantity": 2,
            "order_id": 4,
            "product_name": "咖啡豆",
            "address": "北京市海淀区科技街123号",
            "order_date": "2025-03-25",
            "customer_name": "北京科技有限公司",
            "category": "食品",
            "total_amount": 15999.96,
            "total_price": 179.98
        }
    ]
}
  */
	new Chart(
		canvasRef.value as any,
		{
			type: chatData.type, // 设置图表类型
			data: chatJsData,
		}
		// {
		// 	type: 'line',
		// 	data: {
		// 		labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
		// 		datasets: [
		// 			{
		// 				label: '销售额',
		// 				data: [65, 59, 80, 81, 56, 55, 40],
		// 				backgroundColor: 'rgba(75, 192, 192, 0.2)',
		// 				borderColor: 'rgba(75, 192, 192, 1)',
		// 				borderWidth: 1,
		// 			},
		// 		],
		// 	},

		// type: props.msg.chartType,
		// data: props.msg.data,
		// 	// options: {
		// 	//   responsive: true,
		// 	//   maintainAspectRatio: false
		// 	// }
		// }
	)
})
</script>
<template>
	<div class="chart-com">
		<canvas ref="canvasRef" width="600" height="300"></canvas>
	</div>
</template>
<style scoped lang="scss">
.chart-com {
	canvas {
	}
}
</style>
